<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        
        <link rel="stylesheet" href="index.css">
    </head>

    <body>
        <div class="container">
            <div class="title">Preferences</div>
            <div class="preferences-container">
                <div class="category-container">
                    <p class="category active">Notifications</p>
                </div>
                <div class="category-preferences">
                    <div class="preference-list">
                        <div class="preference" title="Display notifications when receiving new email messages">
                            <p><input type="checkbox" id="notifyUnread"> Notify on New messages</p>
                        </div>
                        <div class="preference" title="Display notifications when snoozed messages re-appear">
                            <p><input type="checkbox" id="notifySnoozed"> Notify on Snoozed messages</p>
                        </div>
                        <div class="preference" title="Display notifications when email attachments are downloaded">
                            <p><input type="checkbox" id="notifyDownload"> Notify on Downloaded files</p>
                        </div>
                        <div class="preference" title="How often to check for new or snoozed emails (in seconds)">
                            <p>Notification update period:<input type="number" min=0 step=1 id="notifyPeriod">seconds</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="preferences-container">
                <div class="category-container">
                    <p class="category active">Analytics</p>
                </div>
                <div class="category-preferences">
                    <div class="preference-list">
                        <div class="preference" title="Report usage details to developer">
                            <p><input type="checkbox" id="sendAnalyticsCheckbox"> Send usage reports</p>
                        </div>
                    </div>
                    <div class="actions-container">
                        <button class="action" id="savePreferencesButton">DONE</button>
                    </div>
                </div>
            </div>
        </div>
        <script src="index.js"></script>
    </body>
</html>
